// import react, react router
import React, { useState } from "react";
// import mui
import {
  Paper,
  InputBase,
  Box,

  Divider,
  IconButton,
} from "@mui/material";
import { alpha } from "@mui/material/styles";
import SearchIcon from "@mui/icons-material/Search";
//import component
import { RowFlexBoxCC, LilySnack } from "../common/Common";
import AdvancedSearchButton from "../advancedSearchButton/AdvancedSearchButton";
import SelectMenu from "./SelectMenu";
//import lib
import { CHINESE_SEARCH_MODEL } from "../advancedSearchButton/Common";
/**
 * 这是一个搜索栏组件
 */
export default function SearchBar({ setSearchData }) {
  const OPTIONS = {
    0: false,
    1: true,
  };
  /* ---------------------------------------------------------
   *                    Snackbar messages
   * ---------------------------------------------------------*/
  const [snackbarMes, setSnackbarMes] = useState({
    text: undefined,
    open: false,
    severity: "warning",
  });

  // 定义搜索框中的文本状态，初始为空字符串
  const [searchStr, setSearchStr] = useState("");

  // 定义选中的选项索引状态，默认为0，即第一个选项
  const [selectedIndex, setSelectedIndex] = useState(0);

  // 定义搜索框是否聚焦的状态，默认为 false
  const [isFocus, setIsFocus] = useState(false);

  // 处理搜索文本变化的函数，更新搜索框文本并设置展开栏为可展开状态
  const handleSearchText = (keywords) => {
    // setExpandable(true);
    setSearchStr(keywords);
  };

  // 处理搜索框聚焦事件的函数，设置搜索框为聚焦状态并使展开栏可展开
  const handleFocus = () => {
    setIsFocus(true);
  };

  // 处理搜索框失焦事件的函数，设置搜索框为未聚焦状态并收起展开栏
  const handleBlur = () => {
    setIsFocus(false);
  };

  //获取搜索栏的内容将其添加到searchData中去
  const handleSearch = (searchConditionKey, searchConditionValue) => {
    // 检查 searchStr 是否为空
    if (!searchStr.trim()) {
      setSnackbarMes({
        text: "请输入正确的搜索条件",
        open: true,
        severity: "error",
      });
      return; // 如果为空，则不执行后续操作
    }

    setSearchData((currentSearchData) => {
      let newSearchData = { ...currentSearchData };

      if (typeof searchConditionKey === "boolean") {
        newSearchData.fullText = CHINESE_SEARCH_MODEL[searchConditionKey];
        newSearchData.keywords = searchConditionValue;
      }

      return newSearchData;
    });
  };

  return (
    <Box sx={{ display: "flex", alignItems: "column", px: 5 }}>
      <RowFlexBoxCC>
        <Box sx={{ position: "relative" }}>
          <Paper
            component="form"
            sx={{
              display: "flex",
              alignItems: "center",
              border: "1px solid",
              borderRadius: 4, // 设置圆角为 4px
              height: "40px",
              borderColor: (theme) => alpha(theme.palette.primary.main, 0.5),
              transition: "width 0.3s ease-in-out", // 添加过渡效果
              width: isFocus || searchStr ? 400 : 200, // 根据聚焦状态改变宽度
              "&:hover": {
                backgroundColor: (theme) =>
                  alpha(theme.palette.barBackground.main, 0.05),
              },
            }}
          >
            <SelectMenu
              selectedIndex={selectedIndex}
              setSelectedIndex={setSelectedIndex}
            />
            <Box>
              <Divider sx={{ height: 28, ml: 4 }} orientation="vertical" />
            </Box>
            <InputBase
              sx={{ ml: 2, flex: 1 }}
              placeholder="搜索..."
              onChange={(event) => handleSearchText(event.target.value)}
              onFocus={handleFocus}
              onBlur={handleBlur}
              value={searchStr}
            />
            <IconButton
              sx={{ p: "10px", size: "small" }}
              aria-label="search"
              onClick={() => handleSearch(OPTIONS[selectedIndex], searchStr)}
            >
              <SearchIcon />
            </IconButton>
          </Paper>
          {/* 展开栏 */}
          {
            //TODO 采用热点数据展开
          }
        </Box>
        <Box sx={{ ml: "10px" }}>
          <AdvancedSearchButton setSearchData={setSearchData} />
        </Box>
      </RowFlexBoxCC>
      <LilySnack
        duration={snackbarMes.duration}
        open={snackbarMes.open}
        onClose={(event, reason) => {
          if (reason === "clickaway") {
            return;
          }
          setSnackbarMes({ ...snackbarMes, open: false });
        }}
        severity={snackbarMes.severity}
        text={snackbarMes.text}
      />
    </Box>
  );
}
